<template>
  <div class="scenecont">
    <div style="width: 1200px; margin: 0 auto">
      <!-- 面包屑 -->
      <a-breadcrumb class="Allbreadcrumb" separator=">">
        <a-breadcrumb-item>
          <a href="/">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item
          ><a href="/competition/index">大赛活动</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item
          ><a href="/competition/track">互联网及服务</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item
          ><a href="/competition/track">低代码</a>
        </a-breadcrumb-item>
        <a-breadcrumb-ite style="color: #ffbe37">项目详情</a-breadcrumb-ite>
      </a-breadcrumb>
      <!-- 企业简介 -->
      <div class="screen">
        <div>
          <div class="displayinline">
            <img class="qiyeimg" src="@/assets/image/competition/section9pic2.png" alt="">
          </div>
          <div class="displayinline xqdetail">
            <p class="txt1">项目名称内容文本项目名称内容文本项目名称内容文本</p>
            <p class="mt16">
              <span class="qybqname">标签名</span><span class="qybqname">标签名</span><span class="qybqname">标签名</span>
            </p>
            <p class="mt81">
              <span class="border50"></span>
              <span @click="gotocompany()" class="qynames">企业名称</span>
            </p>
            <p class="tpwarp mt16">
              <span class="tpbtn wxfl" @click="votewhe=true">立即投票</span><span class="wxfr wxft12">已投票：126    |    浏览量：267</span>
            </p>
          </div>
        </div>
      </div>
      <!-- 项目介绍、专家点评 -->
      <div class="projectintroduce">
        <div class="leftwarp">
          <a-tabs v-model:activeKey="activeKey">
              <a-tab-pane key="1" tab="项目介绍">
                <p class="xmjstit">项目介绍</p>
                <p class="txt2">活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员通过培训具备一技之长，实现“双向推进”格局，推动残疾人、残疾人家庭事业发展，引导社会各界机构持续关注残疾人、残疾人家庭事业发展。
活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员通过培训具备一技之长，实现“双向推进”格局，推动残疾人、残疾人家庭事业发展，引导社会各界机构持续关注残疾人、残疾人家庭事业发展。</p>
                <p class="xmjstit">核心竞争力</p>
                <p class="txt2">活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员通过培训具备一技之长，实现“双向推进”格局，推动残疾人、残疾人家庭事业发展，引导社会各界机构持续关注残疾人、残疾人家庭事业发展。
活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员通过培训具备一技之长，实现“双向推进”格局，推动残疾人、残疾人家庭事业发展，引导社会各界机构持续关注残疾人、残疾人家庭事业发展。</p>
                <p class="xmjstit">商业模式</p>
                <p class="txt2">活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员通过培训具备一技之长，实现“双向推进”格局，推动残疾人、残疾人家庭事业发展，引导社会各界机构持续关注残疾人、残疾人家庭事业发展。
活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员通过培训具备一技之长，实现“双向推进”格局，推动残疾人、残疾人家庭事业发展，引导社会各界机构持续关注残疾人、残疾人家庭事业发展。</p>
              </a-tab-pane>
              <a-tab-pane key="2" tab="专家点评" force-render>
                <ul class="commentzj">
                	<li>
                    <div class="avtor">
                      <img src="@/assets/image/competition/pjavtor.png" alt="">
                    </div>
                    <div class="pjcont">
                      <p class="zjname">李明</p>
                      <p class="zjtitle">人物职称/title内容文本</p>
                      <p class="zjpl">活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员。活动通过发现适宜残疾人、残疾人家庭参与的行业赛道。</p>
                    </div>
                    <div style="clear: both;"></div>
                  </li>
                  <li>
                    <div class="avtor">
                      <img src="@/assets/image/competition/pjavtor.png" alt="">
                    </div>
                    <div class="pjcont">
                      <p class="zjname">李明</p>
                      <p class="zjtitle">人物职称/title内容文本</p>
                      <p class="zjpl">活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员。活动通过发现适宜残疾人、残疾人家庭参与的行业赛道。</p>
                    </div>
                    <div style="clear: both;"></div>
                  </li>
                  <li>
                    <div class="avtor">
                      <img src="@/assets/image/competition/pjavtor.png" alt="">
                    </div>
                    <div class="pjcont">
                      <p class="zjname">李明</p>
                      <p class="zjtitle">人物职称/title内容文本</p>
                      <p class="zjpl">活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员。活动通过发现适宜残疾人、残疾人家庭参与的行业赛道。</p>
                    </div>
                    <div style="clear: both;"></div>
                  </li>
                  <li>
                    <div class="avtor">
                      <img src="@/assets/image/competition/pjavtor.png" alt="">
                    </div>
                    <div class="pjcont">
                      <p class="zjname">李明</p>
                      <p class="zjtitle">人物职称/title内容文本</p>
                      <p class="zjpl">活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员。活动通过发现适宜残疾人、残疾人家庭参与的行业赛道。</p>
                    </div>
                    <div style="clear: both;"></div>
                  </li>
                  <li>
                    <div class="avtor">
                      <img src="@/assets/image/competition/pjavtor.png" alt="">
                    </div>
                    <div class="pjcont">
                      <p class="zjname">李明</p>
                      <p class="zjtitle">人物职称/title内容文本</p>
                      <p class="zjpl">活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员。活动通过发现适宜残疾人、残疾人家庭参与的行业赛道。</p>
                    </div>
                    <div style="clear: both;"></div>
                  </li>

                </ul>

              </a-tab-pane>
            </a-tabs>
        </div>
        <div class="rightwarp">
          <!-- 用户评论 -->
          <div class="yhpl">
            <div class="pltop">
              用户评论（2）
            </div>
            <div class="plbottom posrela">
              <ul class="pllists">
              	<li>
                  <div class="avtorli">
                    <img src="@/assets/image/competition/pjavtor.png" alt="">
                    <span class="txt6">李明  <span class="txt7">05-09  12:23</span></span>
                    <p class="txt5">活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员。活动通过发现适宜残疾人、残疾人家庭参与的行业赛道。</p>
                  </div>
                </li>
                <li>
                  <div class="avtorli">
                    <img src="@/assets/image/competition/pjavtor.png" alt="">
                    <span class="txt6">李明  <span class="txt7">05-09  12:23</span></span>
                    <p class="txt5">活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员。活动通过发现适宜残疾人、残疾人家庭参与的行业赛道。</p>
                  </div>
                </li>
              </ul>
              <div class="inputup">
                <a-input-search
                      v-model:value="value"
                      placeholder="输入评论内容~"
                      enter-button="评论"
                      size="large"
                      @search="onSearch"
                    />
              </div>
            </div>
          </div>
          <!-- 推荐项目 -->
          <div class="tjxm xmmt20">
            <div class="pltop">
              推荐项目
            </div>
            <div class="plbottom">
              <ul class="tjxmul">
              	<li>
                  <div class="displayinline2">
                    <img src="@/assets/image/competition/qyimgxm.png" alt="">
                  </div>
                  <div class="displayinline2 wie240">
                    <p>项目名称内容文本项目名称内容文本项目名称内容文本</p>
                    <p class="mt24">
                      <span>
                        <span class="border50"></span>
                        <span>企业名称</span>
                      </span>

                      <span class="qybqname flrg">标签名</span>
                    </p>
                  </div>
                </li>
                <li>
                  <div class="displayinline2">
                    <img src="@/assets/image/competition/qyimgxm.png" alt="">
                  </div>
                  <div class="displayinline2 wie240">
                    <p>项目名称内容文本项目名称内容文本项目名称内容文本</p>
                    <p class="mt24">
                      <span>
                        <span class="border50"></span>
                        <span>企业名称</span>
                      </span>

                      <span class="qybqname flrg">标签名</span>
                    </p>
                  </div>
                </li>
                <li>
                  <div class="displayinline2">
                    <img src="@/assets/image/competition/qyimgxm.png" alt="">
                  </div>
                  <div class="displayinline2 wie240">
                    <p>项目名称内容文本项目名称内容文本项目名称内容文本</p>
                    <p class="mt24">
                      <span>
                        <span class="border50"></span>
                        <span>企业名称</span>
                      </span>

                      <span class="qybqname flrg">标签名</span>
                    </p>
                  </div>
                </li>
                <li>
                  <div class="displayinline2">
                    <img src="@/assets/image/competition/qyimgxm.png" alt="">
                  </div>
                  <div class="displayinline2 wie240">
                    <p>项目名称内容文本项目名称内容文本项目名称内容文本</p>
                    <p class="mt24">
                      <span>
                        <span class="border50"></span>
                        <span>企业名称</span>
                      </span>

                      <span class="qybqname flrg">标签名</span>
                    </p>
                  </div>
                </li>
              </ul>
            </div>
          </div>

        </div>
        <div style="clear: both;"></div>
      </div>

    </div>

    <!-- 投票弹窗 -->
    <div>
      <a-modal v-model:visible="votewhe" title="" width="292px" @ok="votewhe=false">
        <p><img src="@/assets/image/competition/gth2.png" alt=""><span class="text20">确认要给该场景投票吗？</span></p>
        <p></p>
      </a-modal>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeKey:"1",
        votewhe:false,
      }
    },

    watch: {

    },
    mounted() {


    },
    methods: {
      gotocompany(){
        this.$router.push('/competition/company')
      },
    }
  }
</script>

<style scoped="scoped">


  ::-webkit-scrollbar-track-piece {

    border-radius: 6px;
    background-color: #ccc;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #eee;
    background-clip: padding-box;
    min-height: 28px;
  }

  .qynames{
    cursor: pointer;
  }

  .screen{
    width: 1200px;
    height: 288px;
    background: #FFFFFF;
    padding:24px 24px 0 24px;
  }

  .inputup{
    position: absolute;
        left: 0;
        width: 100%;
        border-top: 1px solid #D8D8D8;
        padding: 10px 0;
        margin-top: 10px;
  }

  .yhpl,.tjxm{
    width: 420px;
    height: 560px;
    background: #FFFFFF;
    padding: 10px 24px 24px 24px;
  }

  .txt6{
    margin-left: 8px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
  }

  .pllists{
    height: 400px;
    overflow-y: auto;
  }

  .plbottom{
    padding-top: 24px;
  }

  .wie240{
    width: 240px;
    margin-left: 12px;
  }

  .txt7{
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }

  .txt5{
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    margin-top: 8px;
    margin-bottom: 24px;
    line-height: 20px;
  }

  .mt24{
    margin-top: 24px;
  }

  .zjname{
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
  }
  .zjpl{
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
  }

  .tjxmul>li{
    margin-bottom: 24px;
  }

  .flrg{
        float: right;
  }

  .pltop{
    padding: 8px 24px 8px 0;
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #1A1A1A;
    line-height: 34px;
    border-bottom: 1px solid #D8D8D8;
  }

  .commentzj>li{
    margin-bottom: 32px;
    display: block;
  }

  .avtor{
    width: 40px;
    height: 40px;
    float: left;
  }

  .pjcont{
    float: left;
    width: 660px;
    margin-left: 8px;
  }

  .zjtitle{
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    margin:4px 0 8px 0;
  }

  .txt2{
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    margin-top: 12px;
  }

  .xmjstit{
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1A1A1A;
    margin-top: 24px;
  }

  .leftwarp{
    width: 760px;
    min-height: 660px;
    background: #FFFFFF;
    float: left;
    padding: 10px 24px 24px 24px;
  }

  .rightwarp{
    width: 420px;
    min-height: 560px;
    /* background: #FFFFFF; */
    float: right;
    /* padding: 10px 24px 24px 24px; */
  }

  .posrela{
    position: relative;
  }

  .projectintroduce{
    width: 1200px;
    margin-top: 16px;
    margin-bottom: 20px;
  }

  .xqdetail{
    height: 239px;
    display: flex;
    margin-left: 24px;
  }

  .wxft12{
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
  }

  .mt81{
    margin-top: 81px;
  }

  .mt16{
    margin-top: 16px;
  }

  .xmmt20{
    margin-top: 20px;
  }

  .tpwarp{
    width: 793px;
    height: 40px;
    line-height: 40px;
  }

  .wxfl{
    float: left;
  }
  .wxfr{
    float: right;
  }

  .tpbtn{
    display: inline-block;
    width: 160px;
    height: 40px;
    background: #FFBE37;
    border-radius: 4px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
  }

  .border50 {
    width: 24px;
    height: 24px;
    background-color: rgba(216, 216, 216, 1);
    border-radius: 50%;
    display: inline-block;
    vertical-align: sub;
    margin-right: 8px;
  }

  .qiyeimg{
    width: 320px;
    height: 240px;
  }

  .qybqname{
    display: inline-block;
    width: 76px;
    height: 24px;
    background: rgba(29, 76, 227, 0.1);
    border-radius: 12px;
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #3C7EFF;
    line-height: 24px;
    text-align: center;
    margin-right: 8px;
  }

  .displayinline{
    display:inline-block;
    vertical-align: middle;
  }

  .displayinline2{
    display:inline-block;
    vertical-align: top;
  }

  .txt1{
    font-size: 24px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
  }

  .scenecont{
    background: #F5F6FA;
    min-height: 500px;
    padding-bottom: 1px;
  }
  .mt20{
    margin-top: 14px;
  }
  .box{
      min-height: calc(100vh - 284px);
      width: 1440px;
      height: 1268px;
      background: #F5F6FA;
  }

  /deep/ .ant-tabs-nav .ant-tabs-tab:last-child{
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }

  /deep/ .ant-tabs-nav .ant-tabs-tab-active{
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600!important;
    color: #1A1A1A;
    text-shadow: none;
  }

  /deep/ .ant-tabs-nav .ant-tabs-tab{
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }

  /deep/ .ant-tabs-ink-bar{
    background-color: #1A1A1A;
  }

  /deep/ .ant-tabs-bar{
    border-bottom: 1px solid #D8D8D8;
  }
</style>
